import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

/**
 * 创建 切片
 *
 * 返回值：
 *    一个切片对象
 *      reducer:  当前切片的reducer纯函数
 *      actions:  一个元素内容为动作创建函数的对象
 *                对象中的元素是否 创建 slice 时的 reducers 配置来的
 */
const slice = createSlice({
  // 切片的命名空间，全局要唯一
  name: "counter",

  // 切片的初始化state数据
  initialState: {
    count: 0,
  },

  /**
   * 配置 state 更新的地方
   *    每一个元素，都是专门处理某个 action type 的 reducer 纯函数
   *    RTK 中集成了 immer ，使我们可以直接操作 state 无需处理返回一个全新的 state
   */
  reducers: {
    // 处理 counter/incremnet 的动作
    increment(state) {
      // state.count++;

      return {
        ...state,
        count: state.count + 1,
      };
    },
    // 处理 counter/decrement 的动作
    decrement(state) {
      // state.count--;

      return {
        ...state,
        count: state.count - 1,
      };
    },
    // 处理 counter/setCount 的动作
    setCount(state, action: PayloadAction<number>) {
      // state.count = action.payload;
      return {
        ...state,
        count: action.payload,
      };
    },
  },
});

console.log("counter 切片", slice);

// const aaa = slice.actions.increment();
// console.log("=== aaa", aaa);

// const bbb = slice.actions.setCount(100);
// console.log("=== bbb", bbb);

// 导出切片中的动作创建函数，供组件中使用
// export const increment = slice.actions.increment
// export const decrement = slice.actions.decrement
export const { increment, decrement, setCount } = slice.actions;

// 导出切片中reducer
export default slice.reducer;
